<template>
    <div class="flow-toolbar">
        <!-- g6自己可以操作的命令 -->
        <!-- 规范：class必须有command，属性data-command必须提供 -->
        <div class="command" v-for="(item, index) in toolbarList" :key="'command' + index" :data-command="item.command">
            <el-tooltip :content="item.text" placement="bottom">
                <svg-icon :icon-class="item.icon" :class-name="`${item.icon}-svg`" />
            </el-tooltip>
            <el-divider v-if="item.isDivider" direction="vertical"></el-divider>
        </div>
        <!-- 手动添加的命令 -->
        <el-divider direction="vertical"></el-divider>
        <!-- 全屏 -->
        <div class="command" :data-command="'fullScreen'" @click="handleFullScreen">
            <el-tooltip content="全屏/退出全屏" placement="bottom">
                <svg-icon v-if="isFullScreen" icon-class="full-screen-cancel" class-name="full-screen-cancel-svg" />
                <svg-icon v-else icon-class="full-screen" class-name="full-screen-svg" />
            </el-tooltip>
        </div>
        <el-divider direction="vertical"></el-divider>
        <!-- 组合，取消组合 -->
        <!-- <div class="command" :data-command="'group'" @click="handleGroup">
            <el-tooltip content="组合" placement="bottom">
                <svg-icon icon-class="group" class-name="group-svg" />
            </el-tooltip>
        </div>
        <div class="command" :data-command="'ungroup'" @click="handleCancelGroup">
            <el-tooltip content="取消组合" placement="bottom">
                <svg-icon icon-class="ungroup" class-name="ungroup-svg" />
            </el-tooltip>
        </div>
        <el-divider direction="vertical"></el-divider> -->
        <!-- 保存 -->
        <div class="command" :data-command="'save'" @click="handleSave">
            <el-tooltip content="保存" placement="bottom">
                <svg-icon icon-class="save" class-name="save-svg" />
            </el-tooltip>
        </div>
        <!-- 打印数据 -->
        <div class="command">
            <el-button type="primary" size="mini" @click="printData">打印数据</el-button>
        </div>
    </div>
</template>

<style lang="scss" src="./Index.scss" scoped></style>
<script>
export default {
    name: 'ToolBarPanel',
    data() {
        return {
            //工具栏
            toolbarList: [
                {
                    mode: ['edit'], //工作模式
                    command: 'undo',
                    icon: 'undo',
                    text: '撤销',
                    isDivider: false //分隔符
                },
                {
                    mode: ['edit'], //工作模式
                    command: 'redo',
                    icon: 'redo',
                    text: '重做',
                    isDivider: true //分隔符
                },
                {
                    mode: ['edit'], //工作模式
                    command: 'copy',
                    icon: 'copy',
                    text: '复制',
                    isDivider: false //分隔符
                },
                {
                    mode: ['edit'], //工作模式
                    command: 'paste',
                    icon: 'paste',
                    text: '粘贴',
                    isDivider: true //分隔符
                },
                {
                    mode: ['edit', 'isView'], //工作模式
                    command: 'zoomIn',
                    icon: 'zoom-in',
                    text: '放大',
                    isDivider: false //分隔符
                },
                {
                    mode: ['edit', 'isView'], //工作模式
                    command: 'zoomOut',
                    icon: 'zoom-out',
                    text: '缩小',
                    isDivider: false //分隔符
                },
                {
                    mode: ['edit', 'isView'], //工作模式
                    command: 'autoFit',
                    icon: 'fit',
                    text: '自适应',
                    isDivider: false //分隔符
                },
                {
                    mode: ['edit', 'isView'], //工作模式
                    command: 'resetZoom',
                    icon: 'actual-size',
                    text: '1:1',
                    isDivider: true //分隔符
                },
                {
                    mode: ['edit'], //工作模式
                    command: 'delete',
                    icon: 'delete',
                    text: '删除',
                    isDivider: false //分隔符
                }
            ],
            isFullScreen: false //是否全屏
        };
    },
    methods: {
        // 全屏
        handleFullScreen() {
            this.isFullScreen = !this.isFullScreen;
            this.$bus.emit('fullScreenEvent', this.isFullScreen);
        },
        // 组合
        handleGroup() {
            this.$bus.$emit('groupFlowEvent');
        },
        // 取消组合
        handleCancelGroup() {
            this.$bus.$emit('ungroupFlowEvent');
        },
        // 保存
        handleSave() {
            this.$bus.$emit('saveFlowEvent');
        },
        // 打印数据
        printData() {
            let parent = this.$parent.$refs['toolbarRef'];
            console.log(parent);
        }
    }
};
</script>

<style src="./Index.scss" lang="scss" scoped></style>
